<template>
  <div id="msbd">
    <el-button type="success" @click="drawer = true">新增</el-button>
    <el-button type="warning">批量设置为未审核</el-button>
    <el-button type="danger">批量删除</el-button>
    <el-input
      placeholder="请输入内容"
      v-model="input"
      class="input-with-select"
    >
      <el-button slot="append" icon="el-icon-search"></el-button>
    </el-input>
    <el-table :data="list" height="335" border style="width: 100%">
      <el-table-column type="index" label="#" width="60"> </el-table-column>
      <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
      <el-table-column prop="edu" label="学历" width="120"> </el-table-column>
      <el-table-column prop="weixin" label="微信" width="300">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope" width="150">
          <el-button type="text" size="small"> 编辑</el-button>
          <el-button type="text" size="small" @click="deleteUser(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer :title="title" :visible.sync="drawer" :direction="direction">
      <!--  -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="form.edu" placeholder="请选择学历">
            <el-option label="小学" value="xiaoxue"></el-option>
            <el-option label="初中" value="chuzhong"></el-option>
            <el-option label="高中" value="gaozhong"></el-option>
            <el-option label="大学" value="daxue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="照片">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="handleAvatarSuccess"
          >
            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
      <!--  -->
    </el-drawer>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      input: "",
      drawer: false,
      direction: "ltr",
      title: "新增用户信息",
      form: {
        imageUrl: "",
      },
    };
  },
  layout: "msbd",
  async fetch({ store }) {
    store.dispatch("users/getList");
  },
  methods: {
    deleteUser() {},
    onSubmit() {},
    onCancel() {},
    handleAvatarSuccess(data) {},
  },
  computed: {
    ...mapState("users", ["list"]),
  },
};
</script>

<style scoped>
#msbd {
  height: 100%;
}

.el-table--border {
  margin-top: 5px;
}
.el-button + .el-button {
  margin-left: 0;
}
.el-input {
  width: 380px;
  float: right;
}
</style>